<template>
  <div class="topicHandle">
     <!-- 头部按钮 -->
    <div class="headerDiv">
      <div class="headerDiv_left">
          <i :class="rotate ? 'el-icon-refresh rotateGo' : 'el-icon-refresh rotateBack'"  @click="refreshBtn"></i>
          <el-button type="primary" @click="publishTopic">发布题目</el-button>
          <el-button type="primary" @click="deletMessage(multipleSelection)">批量删除</el-button>
          <el-button type="primary" @click="lookAll()">{{lookAllWord}}</el-button>
      </div>
      <el-form :inline="true" class="demo-form-inline headerDiv_right">
          <el-form-item>
            <el-input v-model="formInline" placeholder="请输入要搜索的题目" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryMessage">查询</el-button>
          </el-form-item>
      </el-form> 
    </div>  

    <!-- 中间表单 -->
    <div class="contentDiv">
      <el-table
        ref="multipleTable"
        :data="dataShows"
        tooltip-effect="dark"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="getRowKeys"
        >
        <el-table-column
          :reserve-selection="true"
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="college"
          label="学院"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="topicClass"
          label="题目班别"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="topicTitle"
          label="题目"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="jsName"
          label="老师"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="选题情况"
          align="center"
          >
          <template slot-scope="scope">
            <div v-show="scope.row.topicSelect === '1'" style="color: red;font-weight: 900">已选</div>
            <div v-show="scope.row.topicSelect === '0'" style="color: green;font-weight: 900">未选</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editMessage(scope.row)"  circle></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deletMessage(scope.row.topicId)"  circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页按钮 -->
    <div class="pagingTool">
       <el-pagination background @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="current" 
                  :page-size="pageSize"
                  layout="prev, pager, next, jumper, slot, total" 
                  :total="total" class="pageInfo">
          <span id="sure">确定</span>
       </el-pagination>
    </div>

    <!-- 模态框 -->
    <el-dialog class="addDialog" :title="dialogTitle" :visible.sync="dialogFormVisible" width="70%">
      <el-form :model="form">
        <div class="dialogUp">
            <div class="dialogLeft">
                <el-form-item label="毕设题目" :label-width="formLabelWidth">
                    <el-input v-model="form.topicTitle" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="老师教工号" :label-width="formLabelWidth">
                    <el-input v-model="form.jsNum" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="老师名字" :label-width="formLabelWidth">
                    <el-input v-model="form.jsName" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="题目限选班别" :label-width="formLabelWidth">
                    <el-select v-model="form.topicClass" placeholder="请选择类型">
                      <el-option label="软件题目" value="软件题目"></el-option>
                      <el-option label="数媒题目" value="数媒题目"></el-option>
                      <el-option label="物联题目" value="物联题目"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="选题情况" :label-width="formLabelWidth">
                    <el-select v-model="form.topicSelect" placeholder="请选择类型">
                      <el-option label="未选" value="0"></el-option>
                      <el-option label="已选" value="1"></el-option>
                    </el-select>
                  </el-form-item>
            </div>

            <div class="dialogRight" v-show="showDialogRight">
                <el-form-item label="学院" :label-width="formLabelWidth">
                  <el-input v-model="form.college" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级" :label-width="formLabelWidth">
                  <el-input v-model="form.empClass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生学号" :label-width="formLabelWidth">
                  <el-input v-model="form.stuNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生名字" :label-width="formLabelWidth">
                  <el-input v-model="form.stuName" autocomplete="off"></el-input>
                </el-form-item>
            </div>
        </div>
        
        <div class="dialogDown">
          <el-form-item label="题目开始和结束的时间">
            <el-col :span="8">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.startDate" style="width: 60%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="3">~</el-col>
            <el-col :span="8">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.endDate" style="width: 60%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </div>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMessage">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
  data() {
    var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')).user;
    return {
      nowlistData: userInfo,
      nowMen:userInfo.empName,
      lookAllWord: "查看全部题目",
      rotate: false,
      formInline: '',
      multipleSelection: [],
      tableData: [],
      queryDatas: [],
      // 分页
      current:1,      //默认显示第一页数据
      pageSize:5,     //每页显示多少条数据
      total:0,        //一共多少条后台数据
      dataShows: [],   //当前显示的数据
      pageNum: 1,     //共有几页
      totalPage: [],  //所有页面的数据
      // 模态框
      dialogFormVisible: false,
      dialogTitle: "发布题目",
      form: {
        topicSelect:"",
        college:"",
      },
      formLabelWidth: '100px',
      showDialogRight: false
    }
  },

  methods: {
    // 刷新按钮事件
    refreshBtn() {
      var self = this;
      if(self.rotate == false){
        self.rotate = true;
      }else {
        self.rotate = false;
      }
      self.gettableList();
      self.$message({
          showClose: true,
          message: '刷新成功！！！',
          type: 'success'
        });
    },

    // 发布题目按钮事件
    publishTopic() {
      var self = this;
      self.showDialogRight = false;
      self.form = {};
      self.form.topicSelect = "0";
      self.form.college = self.nowlistData.college;
      self.dialogFormVisible = true;
    },

    // 查看全部信息按钮事件
    lookAll() {
      var self = this;
      if(self.lookAllWord == "查看全部数据"){
        self.lookAllWord = "切换";
        self.pageNum = Math.ceil(self.tableData,length / self.pageSize) || 1;
        for(let i = 0; i < self.pageNum; i++){
          self.totalPage[i] = self.tableData.slice(self.pageSize * i, self.pageSize * (i + 1))
        }
        self.dataShows = self.totalPage[self.current - 1];
      }else{
        self.lookAllWord = "查看全部数据";
        self.gettableList();
      }
     
    },

    // 查询按钮事件
    queryMessage() {
      var self = this;
      var newTables = self.queryDatas;
      var newsQuerys = self.formInline.toLowerCase();
      let newArrays = [];
      newArrays = newTables.filter( function(e){
         if(JSON.stringify(e).toLowerCase().indexOf(newsQuerys) !== -1){
           return e;
         }
      });
      if(newArrays.length !== 0){
          self.$message({
              message: '查找成功，这是一条成功消息',
              type: 'success'
          });
      } else {
         self.$message({
              message: '我记得没有这一条信息的哦',
              type: 'warning'
          });
      }
      self.total = newArrays.length;
      self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
          for(let i = 0; i < self.pageNum; i++){
            self.totalPage[i] = newArrays.slice(self.pageSize * i, self.pageSize * (i + 1))
          }
      self.dataShows = self.totalPage[self.current - 1];
    },

    // 编辑信息按钮事件
    editMessage(row) {
      var self = this;
      self.dialogTitle = "编辑信息";
      self.showDialogRight = true;
      self.form = row;
      self.dialogFormVisible = true;
    },

    // 批量删除按钮事件，表单单个删除事件
    deletMessage(id) {
      var self = this;
      let selectList = [];
      let newSelects = self.multipleSelection;
      if(id.constructor !== Array){
        selectList.push(id);
      } else {
        newSelects.forEach(e => { selectList.push(e.topicId) });
      }
      let delectDatas = {
        idList: selectList,
      }
      self.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axiosRequest("delete","/topicInfo/del",delectDatas).then((res) => {
              if (res.data.code === 200) {
                  self.gettableList();
                  self.$message({
                    type: 'success',
                    message: '删除数据成功！！！'
                  });
                } else {
                  self.$message({
                    showClose: true,
                    message: '错了哦，请求信息失败了！！！',
                    type: 'error'
                  });
                }
            });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除！！！'
          });          
        });
    },

    //表格多选切换页面回显
    getRowKeys(row) {
      return row.topicId;
    },

    // 单选或多选表单
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },

    // 模态框 —— 确定按钮事件
    saveMessage() {
      var self = this;
      var newForm = self.form;
      axiosRequest("post","/topicInfo/save",newForm).then((res) => {
          if (res.data.code === 200) {
              self.$message({
                message: '保存信息成功！！！',
                type: 'success'
              });
              self.dialogFormVisible = false;
              self.gettableList();
            } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },

    //每页显示
    handleSizeChange(val) {
      this.pageSize = val;
      this.current=1;
    },

    //显示页
    handleCurrentChange(val) {
      this.current = val;
      this.gettableList();
    },

    // 请求后台题目数据
    gettableList(){
      var self = this;
      var newToticDatas = [];
      axiosRequest("get","/topicInfo/listAll",null).then((res) => {
          if (res.data.code === 200) {
              self.tableData = res.data.data;
              newToticDatas = self.tableData.filter( (e) => { return e.jsName == self.nowMen});
              self.queryDatas = JSON.parse(JSON.stringify(res.data.data));
              self.total = newToticDatas.length;
              self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
              for(let i = 0; i < self.pageNum; i++){
                self.totalPage[i] = newToticDatas.slice(self.pageSize * i, self.pageSize * (i + 1))
              }
              self.dataShows = self.totalPage[self.current - 1];
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },
  },

  mounted: function() {
    var self = this;
    self.gettableList();
  },
}
</script>

<style lang="less" scoped>
.topicHandle {
  padding-left: 10px;
  position: relative;
}

.headerDiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.headerDiv_left {
  width: 40%;
  min-width: 320px;
}

.headerDiv_left > i {
  margin-left: 5%;
}

.rotateBack {
  transform: rotate(180deg);
  transition: all 2s;
}

.rotateGo {
  transform: rotate(-180deg);
  transition: all 2s;
}

.headerDiv_left > i:hover {
  color: #218ef3;
  cursor:  pointer;
}

.headerDiv_left /deep/ .el-button {
  margin-top: 4px;
  margin-left: 10%;
  padding: 8px 11px;
}

.headerDiv_right /deep/ .el-button {
  padding: 8px 15px;
}

.headerDiv_right /deep/ .el-input__inner {
    height: 35px;
}

.pagingTool{
  position: absolute;
  top: 458px;
}

#sure {
    border: 1px solid #DCDFE6;
    text-align: center;
    line-height: 25px;
    display: inline-block;
    margin: 0px 15px;
    cursor: pointer;
    width: 4%;
    border-radius: 3px;
}

.addDialog /deep/ .el-dialog {
  margin: 0 auto;
}

.addDialog /deep/ .el-dialog__body {
    padding: 10px 20px 0px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

.dialogUp {
  width: 100%;
  display: flex;
}

.dialogDown {
  width: 100%;
}

.dialogLeft,.dialogRight {
  width: 50%;
}

</style>
